<template>
    <div class="MerchantPast">
        <div class="header">
            <div class="header-left">
                往期活动
            </div>
            <router-link class="header-right" to="/Activity">
                <div>
                    <span>更多</span>
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.3rem;height:.3rem;">
                        <use xlink:href="#icon-jiantouarrow594"></use>
                    </svg>
                </div>
            </router-link>
        </div>
        <div class="itemlist">
            <router-link tag="div" :to="'./Activity/'+item.id" v-for="(item,index) of list" class="pastItem" :key="item.id">
                <div class="itemLeft">
                    <div class="itemCover" :style="{backgroundImage: 'url(' + item.imgUrl + ')'}">
                    
                    </div>
                </div>
                <div class="itemRight">
                    <div class="itemTitle">
                        {{item.title}}
                    </div>
                    <div class="itemInfo">
                        <flexbox :gutter="0">
                            <flexbox-item><span class="itemTime">{{item.time}}</span></flexbox-item>
                            <flexbox-item><span class="itemNumber">参与人数: <em class="itemNumberColor">{{item.number}}</em></span></flexbox-item>
                            <flexbox-item><span class="itemComment">评价: <em class="itemCommentColor">{{item.comment}}</em></span></flexbox-item>
                        </flexbox>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
    name: 'MerchantPast',
    components: {
        Flexbox,
        FlexboxItem
    },
    data () {
        return{
            list: [{
                id: '001',
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '2018-06-07',
                comment: 4,
                number: 253
            },{
                id: '002',
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.30走进中山大学创新创业学院资源对接会',
                time: '2018-06-30',
                comment: 5,
                number: 25
            }]
        }
    }
}
</script>

<style lang="stylus" scoped>
.MerchantPast
    .header
        background: #fff  
        color: #333
        line-height: .78rem
        height: .78rem
        font-size: .25rem
        border-bottom: 1px solid #ececec
        box-sizing:border-box
        box-shadow: 0 0 3px rgba(238,238,238,0.1)
        .header-left
            float: left
            &:before
                content: ''
                float: left
                width: .06rem
                height: .22rem
                background-color: #ed722e
                margin-right: .20rem
                margin-top: .25rem
        .header-right
            min-width: 1.04rem
            float: right
            text-align: center
            font-size: .26rem
            color: #ccc
    .itemlist
        padding: .2rem
        background-color: #fff
        .pastItem
            display: flex
            margin-bottom: .3rem
            .itemLeft
                margin-right: .1rem
                .itemCover
                    width: 1.6rem
                    height: 1rem
                    border-radius: .04rem
                    background-size: cover
            .itemRight
                flex: 1
                padding: .1rem 0
                .itemTitle
                    font-size: .38rem
                    margin-bottom: .2rem
                .itemInfo
                    font-size: .26rem
                    color: #999999
                    .itemNumber
                        .itemNumberColor
                            color: #ed722e
                    .itemComment
                        .itemCommentColor
                            color: #ed722e
                        
</style>